Improving MetaMask's UI/UX For Mainstream Adoption

MetaMask is the most popular EVM DeFi Wallet with over 30 million users, and yet it's no hidden secret everyone thinks its UX can be a bit of a struggle. If we want to onboard the world, we need to do better. This case study explores the tip of the iceberg of things MetaMask's UI/UX is getting wrong, and my solutions on how to fix them.

One of the biggest problems with MetaMask's current infrastructure is the way information and actions are nested and organized. Most of the critical information is hidden under buttons and drop-downs that make browsing through your assets very confusing.

While it makes sense to consolidate information on a mobile application or website due to the more restricted real estate area, an expanded desktop web app has more room for improved functionality and usability.

MetaMask has two main window views:

- The minimized pop-up window
- The full-width expanded window

However, there's absolutely no difference between the two. The full-width expanded window has a lot of available white space that would allow for great improvements in usability.

Here's my take on how to optimize the core experience. Starting with...

Ethereum Mainnet is displayed as the default network, along with the tokens you own within that network. Say you want to see any Binance tokens you own. You'd first have to switch networks by clicking on Ethereum Mainnet, pulling a drop-down menu, and selecting the right network — in this case: Binance Smart Chain.

Currently, there is no way to see all your tokens at once. Every single one is hidden under each network, which you have to browse individually, every single time. Why though?

Wouldn't it be helpful to display all your tokens within a specific account in one place, neatly categorized in "network folders"?

That's exactly what I did. I chose to display all the tokens the user owns within an account in one place, each categorized under its corresponding network. These network folders can be folded or minimized to save space, and stay organized.

In addition, I added a cell containing the total value of tokens in each network folder, as well as a link to each network's block explorer (e.g. Etherscan).

I also got rid of the "Import tokens" button, as the wallet should really import all tokens automatically through a block explorer scraper or an API that can find the corresponding tokens and add them from a whitelist the app has, saving the users time.

Allowing the users to disconnect their MetaMask wallet from an external site is a very important feature, as it serves as a way to avoid any security bridges. This important feature however, is completely hidden under a confusing three-dot menu button which contains the option to navigate to "Connected Sites".

With this kind of nested navigation, it seems like it would be quite easy to forget to disconnect from any external sites and get potentially hacked by any external security bridge.

My solution to this problem was to design and incorporate a "Connected Sites" section to the actual site, where it's always visible and therefore serves as a better reminder to the user to disconnect from any external sites.

MetaMask's main account actions are all under a randomly generated user profile picture at the top right corner.

First of all, I decided to get rid of the superfluous autogenerated profile pictures as they don't add any information, aren't memorable, and are just confusing.

After that, I chose to display all of these actions on an always-visible menu panel that takes advantage of the extra space of the expanded window, and making them more accessible to the user.

Here's the result:

Currently, whenever users want to receive tokens from someone else, they have to either copy their wallet address under their Account Name, or go to the, once again, confusing three-dot menu button > Account Details and copying it from there.

Users who are already into crypto know that in order to receive tokens from someone else, they just need to copy their wallet address and send it over. These users can easily find and copy their address directly under their account name, in this case: Peter Public.

But users who are new to crypto would be confused at this point. Adding a "Receive" button makes it intuitive for non crypto natives.

After conducting some user testing, I received feedback on how convenient it would be to be able to change the display currency directly from the main page. Some users might prefer to see ETH/USD, some BNB/EUR.

My solution was to incorporate a simple yet effective currency-switch drop-down menu. This is what it looks like:

MetaMask's icons show major inconsitencies, which, in turn, makes its UI look unpolished and unprofessional. Some icons are solid, others outlined. Some have rounded corners, others sharp ones.

I decided to design all icons from scratch, using a grid to assure consistency across all of them. Here's the result:

MetaMask is a central project in web3 being the most popular EVM wallet. Taking its UI/UX to the next level is one of the high-impact ways we can accelerate adoption of crypto to the mainstream.